import React, {useEffect} from 'react';
import {Button, Container, Grid, Paper, ThemeProvider, Typography,} from "@mui/material";
import PubSub from 'pubsub-js'
import PlayArrowOutlinedIcon from '@mui/icons-material/PlayArrowOutlined';
import {createTheme} from "@mui/material/styles";
import {useLocation} from "react-router-dom"
import _ from "lodash";
import './SingerDetail.css'
import AlbumCard from "./AlbumCard";
import SingerCard from "./SingerCard";
import {get163SingerDetail} from "../../utils/request/163request";
import {getKwSingerDetail} from "../../utils/request/kwrequest";
import {getMgSingerDetail} from "../../utils/request/migurequest";
import {getQSingerDetail} from "../../utils/request/qrequest";

const {get163PlayListDetail} = require("../../utils/request/163request")
const {getQPlayListDetail} = require("../../utils/request/qrequest")
const {getKgPlayListDetail} = require("../../utils/request/kgrequest")
const {getMgPlayListDetail} = require("../../utils/request/migurequest")
const {getKwPlayListDetail} = require("../../utils/request/kwrequest")

const theme = createTheme({
    palette: {
        myred: {
            main: '#ff0202',
            contrastText: 'white',
            light: '#ff0202'
        },
    },
});
export default function SingerDetail(props){

    let {state:{id:i,from:f,allSinger:a,img:m,name:n}} = useLocation();
    const [cards,setCards] = React.useState([]);
    const [rows,setRows] = React.useState([]);
    const [from,setFrom] = React.useState(f);
    const [allSinger,setAllSinger] = React.useState(a);
    let [id,setId] = React.useState(i);
    const [img,setImg] = React.useState(m);
    const [name,setName] = React.useState(n);



    useEffect(() => {
        let token = PubSub.subscribe('changeSingerDetailPage',changePage);
        init();

        return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
            PubSub.unsubscribe(token);
        }
    }, []) // 如果指定的是[], 回调函数只会在第一次render()后执行


    function changePage (msg,data) {
        //console.log("get msg" + msg)
        setId(data.id);
        id = data.id;
        setName(data.name);
        setImg(data.img);
        init();
    }
    function addAll(){

        PubSub.publish("addAllMusic",{from:from,rows:rows})


    }
    function collectAll(){

        PubSub.publish("collectAllMusic",{from:from,rows:rows})


    }
    async function  init(){
        setCards(_.shuffle(allSinger).slice(0,8))
        if(from === '163'){
            //console.log('#163',id)
            await get163SingerDetail(id,(r) => {
                setRows(_.unionBy(r,'id'));
            })
        }else if(from === 'kugou'){
            setRows([{
                img:'',
                id:-1,
                name:'酷狗不支持搜索歌手！',
                auth:'',
                from:'kugou'
            }])
        }
        else if(from === 'kuwo'){
            await getKwSingerDetail(id,(r) => {
                setRows(_.unionBy(r,'id'));
            })
        }
        else if(from === 'migu'){

            await getMgSingerDetail(id,(r) => {
                setRows(_.unionBy(r,'id'));
            })
        }
        else if(from === 'qq'){

            await getQSingerDetail(id,(r) => {

                setRows(_.unionBy(r,'id'));
            })
        }
    }
    return (
        <Container maxWidth="xl" sx={{marginTop:1}}>
            <Paper className='page' elevation={3}>
                <Grid container
                      direction="row"
                >
                    <Grid item xs={8}>
                        <Grid container direction="column">
                            <Paper elevation={3}>
                                <Grid container direction="row">
                                    <Grid item xs={3}>
                                        <img src={img} width='270px' height='270px'/>
                                    </Grid>
                                    <Grid item xs={9}>
                                        <div className='textContent'>
                                            <Typography sx={{marginTop:1}} variant="h4"  gutterBottom component="div">
                                                {name}
                                            </Typography>
                                            <Grid container direction="row">

                                            </Grid>

                                            <Grid container padding={1} marginTop={10}>
                                                <ThemeProvider theme={theme}>
                                                    <Button className='playAllBtn' variant="contained" color='myred' onClick={addAll}><PlayArrowOutlinedIcon/>播放全部</Button>
                                                    <Button className='collectBtn' variant="outlined" color='myred' onClick={collectAll}>收藏</Button>
                                                </ThemeProvider>
                                            </Grid>
                                        </div>
                                    </Grid>
                                </Grid>
                            </Paper>
                            <Grid container

                                  direction="row"
                                  maxHeight={600}
                                  sx={{overflowY:'scroll',overflowX:'hidden'}}
                            >

                                    {rows.map((r) => {
                                        //console.log(r)
                                        return(
                                            <Grid item xs={3}>
                                                <AlbumCard {...r} loading={false}/>
                                            </Grid>
                                        )
                                    })}
                                    {/*<AlbumCard from={from} rows={rows}/>*/}

                            </Grid>

                        </Grid>

                    </Grid>
                    <Grid container item xs={4}>


                            {cards.map((r) => {
                                if(r.id !== id ) {
                                    //console.log("刷新")
                                    //console.log(r.id + "@@@" + id)

                                    return(
                                        <Grid container
                                              justifyContent="center"
                                              alignItems="center"
                                              item xs={12}>
                                            <SingerCard loading={false} key={r.id} changePage={true} {...r}/>
                                        </Grid>
                                    )
                                }else {
                                    return ""
                                }
                            })}

                    </Grid>
                </Grid>
            </Paper>

        </Container>
    );


}